<template>
	<view class="client-container">
		<z-paging ref="paging" v-model="clientData" @query="queryList">	
			<template #top>
				<!-- 固定头部 -->
				<view class="fixed-header">
					<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
					<tn-navbar 
						home-icon="" 
						:bottom-shadow="false" 
						bg-color="tn-type-primary_bg" 
						text-color="#FFFFFF"
					>
						选择客户
					</tn-navbar>
					
					<!-- 搜索框 -->
					<view class="search-wrapper">
						<tn-search-box
							v-model="searchValue"
							@input="searchInputEvent"
							@search="searchBtnClickEventPage"
							size="sm"
							placeholder="搜索客户名称或地址"
							placeholder-icon="search"
							border-color="transparent"
							bg-color="rgba(255,255,255,0.15)"
							text-color="#FFFFFF"
							placeholder-color="rgba(255,255,255,0.7)"
							class="search-input"
							:search-button-bg-color="mainColor"
							shape="round"
						/>
					</view>
				</view>	
			</template>
				
			<!-- 客户列表 -->
			<view class="client-content-wrapper">
				<view class="empty-state" v-if="clientData.length === 0">
					<tn-icon name="user-group" size="80" color="#cbd5e0"/>
					<text class="empty-text">暂无客户数据</text>
				</view>
				
				<view 
					class="client-card" 
					v-for="(item,index) in clientData" 
					:key="index"
					:style="getCardStyle(item)"
				>
					<view class="client-content" @click="selClient(item)">
						<view class="client-name" :style="{ color: item.color || '#2d3748' }">{{item.businessname}}</view>
						<view class="client-address" >{{item.address}}</view>
					</view>
					<view class="client-actions">
						<view class="detail-btn" @click="doGetClientDescData(item)">
							<tn-icon name="message" size="20" :color="item.color || '#666'"/>
						</view>
					</view>
				</view>
			</view>
		</z-paging>	
		
		<!-- 客户详情弹窗 -->
		<tn-popup v-model="showPopup" mode="center" border-radius="24">
			<view class="popup-content" v-if="clientDescInfo.length > 0">
				<view class="popup-header">
					<text class="popup-title">客户详情</text>
					<view class="close-btn" @click="showPopup = false">
						<tn-icon name="close" size="24" color="#999"/>
					</view>
				</view>
				<view class="popup-body">
					<view 
						class="detail-item" 
						v-for="(item,index) in clientDescInfo" 
						:key="index"
					>
						<text class="detail-text">{{item.title}}</text>
					</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import { postCall  } from '@/api/index.js'
	import { createParams } from '@/utils/utils.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import {userAllDataStore} from '@/stores'
	const store = userAllDataStore();
	const headerClass = ref('');
	const mainColor = ref(store.state.mainColor);
	let showPopup = ref(false)
	
	const paging = ref(null)

	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	
	const queryList = (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "CLIENT";		
		params["P_CON"] = searchValue.value;
		postCall(Object.assign(params,pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code===1000){
					paging.value.complete(res.data.DATASET);
				}
			}
			
		}).catch(res =>{
			paging.value.complete(false);
		})
	}
	

	
	let clientDescInfo = reactive([]);
	let doGetClientDescData = (item) =>{
		showPopup.value = true;
		clientDescInfo.length = 0;
		let params = {};
		params["P_ACTION"] = "CLIENTDESC";
		params["P_PROC_NAME"] = procName;
		postCall(Object.assign( createParams(item) , params)).then(res=>{
			if(res){
				Object.assign(clientDescInfo,res.data.DATASET);
			}
		})	
	}
	
	const searchBtnClickEventPage = () =>{
		paging.value.reload();
	}
	
	onMounted(() => {
	  // 在页面展示时将页面滚动到顶部


		// doGetClient();
	});
	
	let back = (val) =>{
		EventBus.emit('clientInfo',val);
		uni.navigateBack();
		// uni.navigateTo({
		// 	url: '/pages/index/index'
		// });
	}
	const searchValue = ref("");
	const searchInputEvent = () =>{
		
	}
	const searchBtnClickEvent = () =>{
		
	} 
	const procName = "PROC_APP_DO_CLASSIFY";

	const clientData = ref([]);
	let doGetClient = () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "CLIENT";		
		params["P_CON"] = searchValue.value;
		postCall(Object.assign(params,createParams(pageInfo))).then(res=>{
			if(res){
				if(res.code===200){
					res.data.DATASET.forEach(item => {
					  clientData.push(item);
					});
				}
			}
			
		})
	}
	
	let selClient = (val) =>{
		uni.setStorageSync("CLIENTINFO",val);
		back(val);
	}
	
	// 获取卡片样式
	const getCardStyle = (item) => {
		if (item.color) {
			return {
				boxShadow: `0 4rpx 16rpx ${item.color}20`
			}
		}
		return {}
	}
	
</script>

<style scoped>
	page {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}

	.client-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}

	/* 头部样式 */
	.fixed-header {
		position: sticky;
		top: 0;
		z-index: 999;
		background: var(--tn-color-primary);
	}

	.search-wrapper {
		padding: 12rpx 24rpx 16rpx;
	}

	.search-input {
		backdrop-filter: blur(10rpx);
		border: 2rpx solid rgba(255, 255, 255, 0.2);
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	}

	/* 内容区域 */
	.client-content-wrapper {
		padding: 16rpx;
		padding-bottom: 100rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 40rpx;
		text-align: center;
	}

	.empty-text {
		margin-top: 24rpx;
		color: #999;
		font-size: 28rpx;
	}

	/* 客户卡片 */
	.client-card {
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.client-card:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.client-content {
		flex: 1;
		margin-right: 16rpx;
	}

	.client-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2d3748;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.client-address {
		font-size: 26rpx;
		color: #718096;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
	}

	.client-actions {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.detail-btn {
		width: 56rpx;
		height: 56rpx;
		background: #f7fafc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.detail-btn:active {
		background: #edf2f7;
		transform: scale(0.9);
	}

	.select-icon {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 弹窗样式 */
	.popup-content {
		width: 640rpx;
		max-height: 800rpx;
		background: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 32rpx 24rpx;
		border-bottom: 2rpx solid #f1f5f9;
		background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2d3748;
	}

	.close-btn {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.close-btn:active {
		background: #e2e8f0;
	}

	.popup-body {
		padding: 24rpx 32rpx 32rpx;
		max-height: 600rpx;
		overflow-y: auto;
	}

	.detail-item {
		padding: 16rpx 0;
		border-bottom: 2rpx solid #f1f5f9;
	}

	.detail-item:last-child {
		border-bottom: none;
	}

	.detail-text {
		font-size: 28rpx;
		color: #4a5568;
		line-height: 1.5;
	}

	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.client-card {
			padding: 20rpx;
		}
		
		.client-name {
			font-size: 30rpx;
		}
		
		.client-address {
			font-size: 24rpx;
		}
	}

	/* 暗色模式支持 */
	@media (prefers-color-scheme: dark) {
		.client-container {
			background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
		}
		
		.client-card {
			background: #2d3748;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
		}
		
		.client-name {
			color: #e2e8f0;
		}
		
		.client-address {
			color: #a0aec0;
		}
		
		.detail-btn {
			background: #4a5568;
		}
		
		.popup-content {
			background: #2d3748;
		}
		
		.popup-header {
			background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
			border-bottom-color: #4a5568;
		}
		
		.popup-title {
			color: #e2e8f0;
		}
		
		.detail-item {
			border-bottom-color: #4a5568;
		}
		
		.detail-text {
			color: #cbd5e0;
		}
	}
</style>